<template>
	<view>
		<view class="top">
			<view class="title">
					<u-icon name="arrow-left" color="#dbdbdb" size="28" @tap="back"></u-icon>
					<text>{{productData.name}}</text>
			</view>
			<view class="pic-team">
					<image src="/static/images/xuhuan.png" mode=""></image>
					<image src="/static/images/zhuanfa.png" mode=""></image>
			</view>
		</view>
		<view class="picOrVideo">
				<video style="width: 100%;height: 100%;margin: 10rpx auto 10rpx;"  v-if="productData.vid" show-mute-btn object-fit="cover" :src="productData.vid"  controls="true">
				</video>
				<image v-else style="width: 100%;height: 100%;margin: 10rpx auto 10rpx;" :src="productData.coverpic"></image>
				<view class="tips">
					
					<template v-if="!Isvip">
						<text>开通会员观看视频做法</text>
						<button  type="default" @tap="openVip">立即开通</button>
					</template>
				
						<view v-if="!token">
							<text>已是会员,</text>
							<text class="login" @tap="login">立即登录></text>
						</view>
					
				</view>
		</view>
		<button type="default" class="vipT">会员低至2元/月，免广告、看10000+名厨视频</button>
		<text class="titles">{{productData.name}}</text>
		<view class="three">
			<text >会员专享</text> <image src="/static/images/huangguan.png" mode=""></image>
			<text>{{productData.pageview}}万浏览</text> <image src="/static/images/liulan.png" mode=""></image>
			<text>{{productData.collections}}收藏</text> <image src="/static/images/shoucamg.png" mode=""></image>
		</view>
		<view class="block-spacing"></view>
		<view class="content">
			<view class="one-item">
					<image src="/static/images/mengbanzu281.png"></image> <text>{{productData.needtime}}分钟以上</text>
					<image src="/static/images/xing.png"></image> <text>切墩（初级）</text>
			</view>
			<view class="two-item">
					<text>用料</text>
					<text>加入购物清单</text>
			</view>
			<view class="gradient-item">
				<view class="gradient" v-for="item in productData.ingredient" :key="item.name">
					<text>{{item.name}}</text>
					<text>{{item.number}}</text>
				</view>
			</view>
			<view class="step-item"  v-if="Isvip">
				<view class="step" v-for="(step,index) in productData.method" :key="step.describe">
					<text>步骤{{index+1}}</text>
					<image :src="step.img"></image>
					<text>{{step.describe}}</text>
				</view>
			</view>
			<text class="tipss" style="font-weight: bold;">小贴示</text>
			<view v-for="tip in productData.tips" :key="tip.tipname">
					<text class="tips-title">{{tip.tipname}}</text>
					<view v-for="(scribe,index) in tip.tipdescribe" :key="scribe">
						<text>{{index+1}}.{{scribe}}</text>
					</view>
			</view>
		</view>
		<view class="block-spacing"></view>
		<view class="tuijian">
			<text style="display: block;margin-top: 20rpx;margin-bottom: 20rpx;font-weight: bold;">相关菜谱</text>
			<scroll-view scroll-x anable-flex >
				<view class="section-items" v-for="item in tuiData" :key="item._id">
					<foodone :item="item" @tap="getDetailss(item._id)"></foodone>
				</view>
			</scroll-view>
			
		</view>
		<view class="wrap">
				<u-back-top :scroll-top="scrollTop"></u-back-top>
			</view>
			
	</view>
</template>

<script>
	export default {
		data() {
			return {
				productData:[],
				tuiData:[],
				scrollTop: 0
			}
		},
		onPageScroll(e) {
				this.scrollTop = e.scrollTop;
			},
		onLoad(option) {	
			
			 this.getDetail(option)
			 this.getTuijian()
		},
		computed:{
			token(){
				return wx.getStorageSync('user_token')
			},
			Isvip(){
				 if(getApp().globalData.userInfo!=null){
					 return getApp().globalData.userInfo.vip
				 }else{
					 return false
				 }
				
			},
		},
		methods: {
			async getDetail(_id){
				const data=await this.$api.detail.getDetail(_id)
				this.productData=data.message[0]
			},
			login(){
			
				uni.switchTab({
					url:"../mine/mine" 
				})
			},
			async getTuijian(){
				const data=await this.$api.search.getSearch({pageSize:4})
				this.tuiData=data.menus
				console.log(this.tuiData);
			},
			back(){
				uni.navigateBack({
					delta:-1
				})
			},
			getDetailss(id){
				uni.navigateTo({
					url:"../datail/datail?_id="+id
				})
			},
			openVip() {
				const token = wx.getStorageSync("user_token")
				if (token) {
					uni.navigateTo({
						url: "../openVip/openVip"
					})
				} else {
					uni.showModal({
						content: '请先登录',
						showCancel: false
					});
					console.log(this.token);
				}
			},
		}
	}
</script>

<style scoped lang="scss">

.top{
	height: 203rpx;
	background-color: #f7911c;
	.title{
		padding-top: 50rpx;
		display: flex;
		margin-bottom: 20rpx;
			>text{
				margin-left: 240rpx;
				font-size: 38rpx;
				color: white;
			}
	}
	.pic-team{
		box-sizing: border-box;
		padding-left: 600rpx;
		padding-top: 10rpx;
		image{
			width: 60rpx;
			height: 60rpx;
		}
	}
}
.picOrVideo{
	height: 350rpx;
	width: 680rpx;
	margin: 10rpx auto 10rpx;
	position: relative;
}
.tips{
	width: 400rpx;
	text-align: center;
	position: absolute;
	left:50%;
	top:50%;
	transform: translate(-50%,-60%);
	text{
		font-size: 35rpx;
		color: white;
		
	}
	button{
		width: 240rpx;
		height: 50rpx;
		line-height: 50rpx;
		background-color: #edd6b2;
		color: #814e2d;
		margin: 25rpx auto;
	}
	.login{
		color: #edd6b2;
	}
}
.vipT{
	width: 680rpx;
	margin-top: 20rpx;
	font-size: 28rpx;
	color: white;
	background-color: #e8b666;
}
.titles{
	display: block;
	width: 600rpx;
	font-size: 40rpx;
	margin: 0 auto;
	text-align: center;
	margin-top: 20rpx;
}
.three{
	display: flex;
	align-items: center;
	width: 680rpx;
	justify-content: center;
	margin: 20rpx auto;
	>text:nth-of-type(1){
		color: #ed6786;
	}
	
	image{
		width: 30rpx;
		height: 30rpx;
		margin: 0 15rpx 0 10rpx;
	}
}
.block-spacing{
	height: 40rpx;
	background-color: #f6f7f8;
}
.content{
	padding: 28rpx;
	box-sizing: border-box;
	.one-item{
		display: flex;
		width: 600rpx;
		margin: 0 auto;
		text-align: center;
		justify-content: center;
		
		>image{
			width: 40rpx;
			height: 40rpx;
			margin-right: 15rpx;
		}
		>text{
			margin-right: 20rpx;
		}
	}
	.two-item{
		border-bottom: 1rpx solid #dbdbdb;
		padding: 10rpx 0;
		display: flex;
		justify-content: space-between;
		>text:nth-of-type(1){
			font-weight: bold;
		}	>text:nth-of-type(1){
			font-weight: bold;
			color: #ee7b2d;
		}
	}
	.gradient{
		border-bottom: 1rpx solid #dbdbdb;
		padding: 10rpx 0;
		display: flex;
		justify-content: space-between;
		>text{
			color: #686868;
		}
		>text:nth-of-type(1){
			width: 400rpx;
			
		}	
		>text:nth-of-type(2){
			width: 280rpx;
			
		}
	}
	.step-item{
		border-bottom: 1px solid #dbdbdb;
		margin-bottom: 30rpx;
		.step{
			text:nth-of-type(1){
				font-weight: bold;
				display: block;
				margin: 40rpx 0 30rpx;
			}
			image{
				width: 100%;
				height: 400rpx;
				margin-bottom: 30rpx;
			}
			text:nth-of-type(2){
				color: #686868;
				display: block;
				margin-bottom: 20rpx;
		
			}
		}
	}
	.tips-title{
		
		display: block;
		margin: 30rpx 0 20rpx;
	}
	
}
.tuijian{
	width: 680px;
	margin: 0 auto;
	padding: 20rpx;
	box-sizing: border-box;
}
scroll-view{
	width: 750rpx;
	height: 400rpx;
	display: flex;
	white-space: nowrap; 
	margin-top: 20rpx;
	.section-items {
		width: 300rpx;
		height: 400rpx;
		display: inline-block;
		margin-right: 50rpx;
	
	}
}
</style>
